<template> 
    <div class="my">
       <p>饿了么</p>
   <div class="top3">
       <img src="https://img1.baidu.com/it/u=2188428785,1339314292&fm=253&fmt=auto&app=138&f=JPEG?w=561&h=500" alt="">
       <div class="name">
           <span style="font-size: 20px;">我鸭肠没了</span> <br>
           <span>{{this.name}}</span>
       </div>
       <div class="right">
           <button>账号设置</button>
       </div>
   </div>
   <div class="top4">
       <div class="text">
           <span>吃货卡</span> 
           <span>|</span>
           <span>吃货豆</span>
           <span>1500</span>
       </div>
       <span style=" font-size: 13px;"> 升级超级吃货卡，每月无门槛红包，下单5倍送吃货豆</span>
   </div>
   <div class="top5">
       <div class="t1">
           <span>红包</span> <br>
           <span>7张今天到期</span>
       </div>
       <div class="t1">
           <span>余额</span> <br>
           <span>0元</span>
       </div>
       
   </div>
   <div class="top6">
       <p style="margin-left: 15px;">常用工具</p>
       <div class="t2">
           <ul>
               <li @click="toaddress()">我的地址</li>
               <li>我的客服</li>
               <li @click="toregister()">店铺关注</li>
               <li>评价有礼</li>
           </ul>
       </div>
   </div>
   <div class="top7">
       <div class="yop8">
           <div class="t3">
           <span>邀好友赚现金</span> <br>
           <span>最高得15元</span>
       </div>
       <div class="t4">
           <input type="button" value="去邀请">
           <input type="button" value="查佣金">
       </div>
       </div>
       <div class="yop8">
           <div class="t3">
           <span>邀好友赚现金</span> <br>
           <span>最高得15元</span>
       </div>
       <div class="t4">
           <input type="button" value="去邀请">
           <input type="button" value="查佣金">
       </div>
       </div>
       
   </div>
    </div>
   </template>
   
   <script setup>
     import { ref ,onMounted,} from 'vue';
     import { useRouter } from 'vue-router';
     var $router=useRouter()
              var name=ref([])
         
         
      onMounted((res)=>{
          name.value=localStorage.getItem('phone')
      })
     var toregister=()=>{
         $router.push('/shoucang')
         }
    var toaddress=()=>{
       $router.push('/address')
           }
        
         
   </script>
   
   <style scoped>
   .right{
       display: flex;
       justify-content: center;
       align-items: center;
   }
   html,body{
       height: 100%;
   }
   .top3 img{
       width: 70px;
       height: 70px;
       border-radius:50% ;
   }
   .right button{
       width:80px ;
       height: 30px;
       border-radius:20px ;
   }
   .top3{
       display: flex;
       justify-content: space-around;
   }
   .name{
       line-height: 30px;
   }
   .my p{
       font-size: 20px;
       margin-left: 15px;
       margin-bottom: 20px;
   }
   .text{
      width: 200px;
      display: flex;
      justify-content: space-around;
   }
   .top4{
       padding: 7px;
       background-color: rgb(51, 153, 225);
       margin: 15px;
       border-radius:10px ;
       color: white;
   }
   .top5{
       width: 345px;
       height: 60px;
       display: flex;
       text-align: center;
       background-color: white;
       margin: 15px;
       border-radius:10px ;
   }
   .t1{
       width: 50%;
       height: 100%;
       padding-top: 10px;
   }
   .my{
       background-color: rgb(236, 236, 236);
      height:600px;
   }
   ul{
       display: flex;
       list-style: none;
   }
   ul li{
       width: 25%;
       height: 50px;
       line-height: 50px;
       text-align: center;
   }
   .top6{
       height: 100px;
       margin: 15px;
       width: 345px;
       border-radius:10px ;
       background-color: white;
   }
   .yop8{
       width: 48%;
       height: 150px;
       text-align: center;
       background-color: white;
       border-radius:10px ;
   }
   .top7{
       display: flex;
       justify-content: space-around;
       padding: 0 10px;
   }
   .t3{
       margin-bottom: 50px;
   }
   .t4 {
       display: flex;
       justify-content: center;
   }
   .t4 input{
       background-color: white;
       border-radius: 20px;
       width: 60px;
       height: 30px;
   }
   .t4 input:nth-of-type(2){
     margin-left: 10px;
   }
   </style>